Creating Your Own Loading Screens

[Birelli]

Note: This is temporarily a work in progress, changes may be made as we work out the "best" method of doing this.

So, you may have noticed that all the "official" maps that came with JB have their own custom loading screens with a nice polished look to them. This thread will detail exactly how that's done with explicit instructions to follow along the way. You'll need a fairly recent version of Photoshop though, and I'm going to assume a decent skill level with image editing, if you need more help just ask.

If you need reference of what the original loading screens look like fire up UEd, open the texture package "JBTexLoading", and export your favorite loading screen, then you can keep it at hand for comparison.

Much of these instructions come courtesy of ZedMaestro, he's done most of the work so you don't have to, so worship him or something


The first thing you'll need to do is take a screenshot of your map, it needs to be at least 1024*768 pixels (more is fine, just scale it down, but keep the 4:3 aspect ratio). Obviously you'll want to choose a nice looking part of your map, people on low-end computers will be sitting watching this for upwards of 30 seconds, so make it look nice.

Now, you need to download some resources, see the attachment at the bottom for the banner that goes down the side. You can download the UT2004 Logo and UT2004 Characters from my hosting. Please only download those if you're going to make loading screens, to take it easy on my hosting.

You're going to be pulling several images off of colored backgrounds, so I'll outline how to do that now. What you want is the "magic wand" tool, it's up with the selection tools. Find the "tolerance" setting (it's location varies in different versions) and set it to 0. Now click the background (the part you don't want) of the image, then go to Select->Inverse. In the case of the UT2004 logo you may need to hold down shift and click multiple times with the magic wand to select all the background areas. If the marquee (dotted line thingy) you get isn't "hugging" what you want properly, increase the tolerance of the wand progressively until it does.

Make a 1024*1024 image file, and copy your (1024*768 resized if needed) screenshot into it. Place the screenshot at the top so there is a 1024*256 pixel space at the bottom. Take the paint bucket and dump pure black into the bottom space.

Now, it's time to add that attractive banner down the left side of your loading screen. Open up the "Tournament 2004.bmp" file (from "Tournament 2004.zip") and copy the white text out and paste it onto your loading screen. Arrange it so that it is "centered" vertically and near the left of the screen, use your best judgement. Now select the layer that was created when you pasted the banner in and slide the "opacity" slider down to 25-50%, or whatever looks right to you. Again, you can use the previously made loading screens for reference with positioning/opacity.

Ok, now you'll need the UT2004 logo. If you have the version I attached here, it is already resized for you, so just pull it off the background and paste it in. Place the logo near the top of the loading screen, either on the left or the right depending on where you want to place your character.

Finally, you'll need your character, look around a bit and find the one you like best. For the versions I've compiled I've already done the work of pulling the characters off of their backgrounds, resizing them, adding the appropriate feather effect, and placing them on a transparent background for you so just do a Select->Select All (ctrl+a) and copy it out onto your loading screen.

Originally Posted by ZedMaestro

The next layer is the "lines" layer. Start a new file, of 1x2 pixels. Colour the bottom pixel with about a 30% grey and the top pixel white. Save that as a pattern (Birelli: Go to Edit->Define Pattern... in PS7). Then, in the layers window, click "create new layer" and make sure its above the previous two layers (Birelli: You want it to be above the background and banner, and below your character and the UT2004 logo). Click "Fill" from the left menu, click "Pattern" from the drop-down menu at the top, and find that 1x2 pixel pattern. Click anywhere in the image, and the entire image should be covered completely in horizontal alternating white and grey lines. Set this layer blending option to Overlay, and reduce the Fill slider to 25%. You should see the background and Tournament 2004 with a nice feint line effect through it.

Ok, that should be about it. Save as you do this at every stage in case you make a mistake. At the end flatten the image and save it in a file format UEd can accept (if you have the DDS plugin go straight to DXT1, with mipmaps). Import the file into the MyLevel package of your map and make the name LoadingScreen (group doesn't matter but the name MUST be LoadingScreen). Make sure you didn't miss the step where you make it a 1024*1024 image with black space at the bottom or UEd won't accept the import. When importing check the "Generate Mipmaps" checkbox unless you already created them with the DDS plugin. If you don't do this quality will degrade at lower resolutions. In the texture browser do properties on your imported texture and set Texture->LODSet to "LODSET_Interface". This will ensure that UT2004 doesn't uglify your loading screen on lower detail settings. Apply your texture to a surface or actor in your map or UEd will discard it when saving (as it believes it to be unused).

That should do it, when you fire up your map Jailbreak should use the loading screen you created, instead of randomly choosing one from the defaults.

[Birelli]

Alright, there it is, the definitive guide to making your own loading screens. Hopefully now every map that comes out can have its very own loading screen, its one more piece of work you're going to have to do now if you want to release a quality JB map, no excuses

Can someone sticky this please?

[Mychaeel]

Nice guide. Can you add it in a tutorial-type style to JDN: Loading Screen please?

Originally Posted by Birelli

no mipmaps

No! Definitely use mipmaps to avoid ugly aliasing effects (especially with that horizontal line grid) when the screenshot is displayed at lower resolutions than 1024x768.

[Birelli]

Oh, oops. Good point about the mipmaps, I'll work that in, and I'll go add a version to JDN shortly.

[4WD]

Originally Posted by Birelli

Note:Now, you need to download some resources, see the attachment at the bottom for the banner that goes down the side. You can download the UT2004 Logo and UT2004 Characters from my hosting.

i've attached a psd (photoshop) file where u only hve to insert your screenshot & your favourite character in the apropriate layers. after a maybe repositioning of the logo & modifying the opacity from the layers lines & tournament2004 to fit your needs, u should be done this is meant for those who experiences problems with the howto.

[Birelli]

Hmm, I like it. Also is there any hosting around, like maybe all these files could go on BU fileworks? I realize those files are still being served up off of my hosting. It sees enough traffic that no one has noticed in all this time (probably not all that many downloads anyway), but that's not a permanent solution for file serving.

Edit: My internet connection is a little screwed up at the moment, basically I can only get on about once a day, and only for short periods. I'll try to get to updating the tutorial and stuff but no promises. I'm also gonna be away from a computer for the weekend, so again I'm not going to be able to do much for this very quickly.

[tarquin]

Is there anything in that tutorial that specifically needs Photoshop?
A lot of mappers who have photoshop didn't, um... pay for it *cough*

It would perhaps be an idea to put it into general terms, so they could also use GIMP. (I switched to using GIMP for Jailbreak screenshots a while back, even got some script-fu that handles resizing etc )

The file should appear in this directory shortly: http://download.beyondunreal.com/bro...eak/resources/

[The_Head]

*cough* needs photoshop......
Lost my old copy

[Vatcilli zeitchef]

Originally Posted by tarquin

Is there anything in that tutorial that specifically needs Photoshop?
A lot of mappers who have photoshop didn't, um... pay for it *cough*

PAY?! what is pay? Can you eat it?

lol no I got my paint shop pro and UT2004 in a fair way,
not with my ut99 though sice I payed for it but the damn disc was damaged
when it came out of the case!
They did not refund it so it was only fair.

[Hans Oberlander]

Hey 4WD, thxs for the photoshop script. lookie at what i did.

I found a problem though, The background (screenie) needs to be applied last or else the tournament 2004 writing doesnt work...

[Birelli]

Originally Posted by Hans Oberlander

I found a problem though, The background (screenie) needs to be applied last or else the tournament 2004 writing doesnt work...

Re-ordering of layers should fix any problems with the order in which you have to do things.

Originally Posted by tarquin

Is there anything in that tutorial that specifically needs Photoshop?
A lot of mappers who have photoshop didn't, um... pay for it *cough*

Yes, you have to have Photoshop because the characters all come in .psd...if there's some way to still have them pre-feathered and have transparent backgrounds, so people don't have to have advanced image editing skills to do this, and not use .psd, then by all means go ahead and convert the files.

[tarquin]

Is the information on this JDN page up to date? --http://mychaeel.no-ip.com/jailbreak/Loading_Screen

Can I unsticky this thread?